
<include file="public@header"/>
<hook name="admin_before_head_end"/>
<body>
<style>
body{
background-color:#e5f3e6;
}
table{
font-size:14px;
text-align:center;
}
table > tbody > tr > th{
text-align:center;
}
table > tbody > tr > td{
border-bottom:1px solid #ddd;
}
.col-md-4 {
padding:0 36px;
}
.col-md-4 table{
margin-bottom:50px;
text-align:center;
}
.col-md-4 table>thead{
background-color:#5fa777;
color:#fafafa
}
.col-md-4 > table > thead > tr > th:nth-child(1){
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.col-md-4 > table > thead > tr > th:nth-child(3){
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.col-md-4 > table > thead > tr > th{
text-align:center;
border:0px;
}
div.col-md-4 > table > tbody > tr:nth-child(1) > td:nth-child(1) > div{
background-color:#FF0000;
width:32px;
height:32px;
margin:0 auto;
}
div.col-md-4 > table > tbody > tr:nth-child(2) > td:nth-child(1) > div{
background-color:#F08519;
width:32px;
height:32px;
margin:0 auto;
}
div.col-md-4 > table > tbody > tr:nth-child(3) > td:nth-child(1) > div{
background-color:#FFFF00;
width:32px;
height:32px;
margin:0 auto;
}
div.col-md-4 > table > tbody > tr:nth-child(4) > td:nth-child(1) > div{
background-color:#00A2E9;
width:32px;
height:32px;
margin:0 auto;
}
div.col-md-4 > table > tbody > tr > td{
border-bottom:1px solid #ddd;
border-top:0;
}
.col-md-8 ul b{
background-color:#006fc4;
color:#fafafa;
}
.col-md-8 ul{
font-size:16px;
text-align:center;
}
.col-md-8 li{
margin:10px 36px;
}
.col-md-8 table caption{
background-color:#5fa777;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-left:32px;
color:#fafafa;
}
.col-md-8 table{
background-color:rgba(229,,243,230,0.5);
background-color:#fafafa;
color:#737373;
margin-bottom:50px;
margin-top:50px;
}
.col-md-8 {
padding:0 36px;
}
.panel{
padding:18px;
 border-radius:20px;
}
.containermap{
 overflow: auto;
 height:1200px;
}
.buttongroup{
top:-10px;
}
</style>
	<div class="row">
		<!-- 左侧1/4列容器 -->
	<div class="col-md-4">
			<h4 style="margin-bottom:24px;">隐患统计</h4>
			<table class="table"  >
				<thead>
					<th>识别色</th>
					<th>风险级别</th>
					<th>风险数量</th>
				</thead>
				<tr>
					<td><div ></div></td>
					<td>Ⅰ级风险点</td>
					<td>2</td>
				</tr>
				<tr>
					<td><div ></div></td>
					<td>Ⅱ级风险点</td>
					<td>2</td>
				</tr>
				<tr>
					<td><div ></div></td>
					<td>Ⅲ级风险点</td>
					<td>2</td>
				</tr>
				<tr>
					<td><div ></div></td>
					<td>Ⅳ级风险点</td>
					<td>2</td>
				</tr>
			</table>
			
		</div>
		<!-- 右侧3/4列容器 -->
		<div class="col-md-8">
			<!-- work tips -->
			<table  class="table" >
			<caption>工作提醒</caption>
				<tr>
					<th>序号</th>
					<th>信息内容</th>
					<th>发布日期</th>
				</tr>
				<tr>
					<td>1</td>
					<td>暂无</td>
					<td>2019/11/8</td>
				</tr>
				<tr>
					<td>2</td>
					<td>暂无</td>
					<td>2019/11/8</td>
				</tr>
				<tr>
					<td>3</td>
					<td>暂无</td>
					<td>2019/11/8</td>
				</tr>
				<tr>
					<td>4</td>
					<td>暂无</td>
					<td>2019/11/8</td>
				</tr>
			</table>

<!-- 职责确认弹出 -->
	</div>
</div>
<div class="row">
	<div class="col-md-4" id = "container" style="height:315px;"></div>
	<div class="col-md-4" id = "container1" style="height:315px;"></div>
	<div class="col-md-4" id = "container2" style="height:315px;"></div>
</div>
<!-- 地图块 -->
			 <div class="panel panel-default ">
                <div >
					<div class="">
						<h3>河南省济源市丰田肥业有限公司 <small>岗位风险一览图</small>
							<div class="pull-right buttongroup">
								<button id="btBack"  
								class="btn btn-default"  
									onclick="zoomout()">放大
								</button>
								<button id="btBack" 
								class="btn btn-default"  
									onclick="zoommin()">缩小
								</button>
								<button id="btBack" 
								class="btn btn-default"  
									onclick="zoomZero()">还原
								</button>
								<button id="btBack"  
								class="btn btn-default"  
									onclick="backIndex()">{:lang('BACK')}
								</button>
							</div>
						</h3>
						
					</div>

				</div>
                <div class="" >
                    <!--onmousewheel="bigimg(this)" __STATIC__/images/gs.jpg-->
                    <div class="row containermap">
                        <img usemap="#map" src="__STATIC__/images/gs.jpg"  style="width:100%;height:100%"
                             id="monitor_map" 
                             "/>   
						<map id="map"name="map">
							<foreach name="mapdata" item="vo">
							<area id="{$vo.dangerAreaID}"onclick="areadataajax(this)" shape="poly" data="{$vo.dangerAreaCoordinate}"coords="" alt="{$vo.dangerAreaName}" />
							</foreach>
						</map>
                    </div>
                </div>
        </div>
</div>
<div id="myModal2" data-backdrop="static" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">职责确认</h4>
      </div>
      <div class="modal-body">
		<form class="js-ajax-form margin-top-20"  action="{:url('admin/main/dutypost')}" method="post">
			<div class="table_full">
				<table class="table table-bordered" id="authrule-tree">
					<tbody>
						{$category}
					</tbody>
				</table>
			</div>
			<!-- <div class="form-actions"> -->
				<!-- <button class="btn btn-primary js-ajax-submit" type="submit">{:lang('SAVE')}</button> -->
				<!-- <a class="btn btn-default" href="{:url('admin/rbac/index')}">{:lang('BACK')}</a> -->
			<!-- </div> -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
	 </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="myModal1" data-backdrop="static" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg" style="width: 100%;height:600px;overflow:auto;" >
                            <div class="modal-content"   >
                                <div class="modal-header">
                                    <button type="button" class="close" 
                                    data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">岗位风险信息</h4>
                                </div>
                                <div class="modal-body"  >

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" 
                                        class="btn btn-default" 
                                        data-dismiss="modal">关闭</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
</div><!-- /.modal -->
<script src="__STATIC__/js/admin.js"></script>
<php>
    $lang_set=defined('LANG_SET')?LANG_SET:'';
    $thinkcmf_version=defined('THINKCMF_VERSION')?THINKCMF_VERSION:'';
</php>
<script>

function areadataajax(a){
var id= a.id;
<!-- console.log(id); -->
$('#myModal1 .modal-body').empty();
$.ajax({
            url:"/index.php/admin/main/dangerShow",
            data:{id:id},
            type:"post",
            dataType:"json",
            success: function(data){
				var rdata = JSON.parse(data);
				console.log(rdata);
			for(var j=0;j<rdata.length;j++){
			var divstr="<div id='tablediv"+j+"'><table class='table1'></table><table class='table2'></table></div>";
			$('#myModal1 .modal-body').append(divstr);
			var dividstr1="#tablediv"+j+" .table1";
			var dividstr2="#tablediv"+j+" .table2";
			$(dividstr1).append("<thead><tr><th>所属单位</th><th>管控区域</th><th>区域负责人</th><th>风险级别</th></tr></thead><tbody><tr><td>"+rdata[0]['name']+
			"</td><td>"+rdata[j]['workArea']+
			"</td><td>"+rdata[j]['stationPerson']+
			"</td><td class='level'>"+rdata[j]['stationdangerLevel']+"</td></tr></tbody>");
			$(dividstr2).append("<thead><tr><th>序号</th><th>危害因素</th><th>事故类型</th><th>控制措施</th><th>风险级别</th></tr></thead>");
					for(var i=0;i<rdata[j]['data'].length;i++){
					$(dividstr2).append(
					"<tbody><tr><td>"+(i+1)+
					"</td><td>"+rdata[j]['data'][i]['dangerInfo']+
					"</td><td>"+rdata[j]['data'][i]['accidentStand']+
					"</td><td>"+rdata[j]['data'][i]['accidentMeasures']+
					"</td><td class='level'>"+rdata[j]['data'][i]['dangerLevel']+"</td></tr></tbody>");
					}
			}
			$('.level').each(function(){
			 if ($(this).text()=='Ⅰ') $(this).css('background-color','#FF0000');
			 if ($(this).text()=='Ⅱ') $(this).css('background-color','#F08519');
			 if ($(this).text()=='Ⅲ') $(this).css('background-color','#FFFF00');
			 if ($(this).text()=='Ⅳ') $(this).css('background-color','#00A2E9');
			});
            }
			
        });
$('#myModal1').modal('show');			
}
//职责确认模态框内容控制
<!-- $('#myModal2').modal('show');  -->
$(document).ready(function () {
		Wind.css('treeTable');
	    Wind.use('treeTable', function () {
	        $("#authrule-tree").treeTable({
	            indent: 20
	        });
	    });
	});

    function checknode(obj) {
        var chk = $("input[type='checkbox']");
        var count = chk.length;

        var num = chk.index(obj);
        var level_top = level_bottom = chk.eq(num).attr('level');
        for (var i = num; i >= 0; i--) {
            var le = chk.eq(i).attr('level');
            if (le <level_top) {
                chk.eq(i).prop("checked", true);
                var level_top = level_top - 1;
            }
        }
        for (var j = num + 1; j < count; j++) {
            var le = chk.eq(j).attr('level');
            if (chk.eq(num).prop("checked")) {

                if (le > level_bottom){
                    chk.eq(j).prop("checked", true);
                }
                else if (le == level_bottom){
                    break;
                }
            } else {
                if (le >level_bottom){
                    chk.eq(j).prop("checked", false);
                }else if(le == level_bottom){
                    break;
                }
            }
        }
    }
//area坐标转换

	$('#map area').each(function(){
		var coords=$(this).attr('data');
		coords=coords.split(',')
		for (i=0;i<coords.length;i=i+2){
			<!-- $(this).attr('coords',coords[i]*$('#monitor_map').width()); -->
			<!-- console.log($(this).attr('coords')); -->
			coords[i]=Math.floor(coords[i]*$('#monitor_map').width());
			<!-- console.log(coords[i]); -->
		}
		for (i=1;i<coords.length;i=i+2){
			<!-- $(this).attr('coords',coords[i]*$('#monitor_map').height()); -->
			<!-- console.log(coords[i]); -->
			coords[i]=Math.floor(coords[i]*$('#monitor_map').height());
			<!-- console.log(coords[i]); -->
		}
		$(this).attr('coords',coords);
		<!-- console.log($(this).attr('coords')); -->
	});
	<!-- console.log($('#map area').attr('coords')); -->
		<!-- console.log($('#monitor_map').width()); -->
    //返回首页
    function backIndex(){
        window.location.href = '/public/index.php/admin/main/index/';
    }
		
	    function zoommark(){

    }
    function zoomout(){
         var myImg = document.getElementById("monitor_map");
        
         var cruWidth = myImg.clientWidth;
         // alert(cruWidth);
        var cruHeight = myImg.clientHeight;
         //alert(cruWidth);   // 
          myImg.style.width = (cruWidth * 1.5) +"px";
           myImg.style.height = (cruHeight  * 1.5) +"px";
          //alert(cruHeight);
    }
    function zoommin(){
     var myImg = document.getElementById("monitor_map");
        var cruWidth = myImg.clientWidth;
        var cruHeight = myImg.clientHeight;
        if(myImg.style.width == 500+"px"){
            alert("缩小到最小范围");
        }else{
             myImg.style.width = (cruWidth / 1.5) +"px";
            myImg.style.height = (cruHeight / 1.5) +"px";
        }
    }
    function zoomZero(){
        
        var myImg = document.getElementById("monitor_map");
        var srcImg = document.getElementById('monitor_map').getAttribute("src");
        var srcc = "__STATIC__/images/gs.jpg";
        //更换图片
        document.getElementById('monitor_map').src=srcc;
    }
    
   

    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });
    });

    function _widgetSort() {
        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {
            }
        });
    }

    //获取官方通知
    $.getJSON("http://www.thinkcmf.com/service/sms_jsonp.php?lang={$lang_set}&v={$thinkcmf_version}&callback=?",
        function (data) {
            var tpl      = '<li><em class="title"></em><span class="content"></span></li>';
            var $notices = $("#thinkcmf-notices");
            $notices.empty();
            if (data.length > 0) {
                $('#thinkcmf-notices-grid').show();
                $.each(data, function (i, n) {
                    var $tpl = $(tpl);
                    $(".title", $tpl).html(n.title);
                    $(".content", $tpl).html(n.content);
                    $notices.append($tpl);
                });
            } else {
                $notices.append("<li>^_^,{:lang('NO_NOTICE')}~~</li>");
            }
        });

    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });


    });

    function _widgetSort() {

        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {

            }
        });
    }

    //获取官方通知
    $.getJSON("http://www.thinkcmf.com/service/sms_jsonp.php?lang={$lang_set}&v={$thinkcmf_version}&callback=?",
        function (data) {
            var tpl      = '<li><em class="title"></em><span class="content"></span></li>';
            var $notices = $("#thinkcmf-notices");
            $notices.empty();
            if (data.length > 0) {
                $('#thinkcmf-notices-grid').show();
                $.each(data, function (i, n) {
                    var $tpl = $(tpl);
                    $(".title", $tpl).html(n.title);
                    $(".content", $tpl).html(n.content);
                    $notices.append($tpl);
                });
            } else {
                $notices.append("<li>^_^,{:lang('NO_NOTICE')}~~</li>");
            }
        });
</script>
<script src="__STATIC__/js/echarts/echarts.min.js"></script>

<script  type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
var myChart = echarts.init(document.getElementById('container1'));

        // 指定图表的配置项和数据
        var option1 = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
	series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
		
var myChart = echarts.init(document.getElementById('container2'));
option2 = {
    title: {
        text: '折线图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
	myChart.setOption(option2);		
</script>	
<hook name="admin_before_body_end"/>
</body>
</html>